<script setup lang="ts">
import { Form } from '@/components/Form'
import { useForm } from '@/hooks/web/useForm'
import { PropType, reactive, watch, watchEffect, ref } from 'vue'
import { TableData } from '@/api/table/types'
import { useI18n } from '@/hooks/web/useI18n'
import { useValidator } from '@/hooks/web/useValidator'
// import { IDomEditor } from '@wangeditor/editor'
import { FormSchema } from '@/types/form'

const { required } = useValidator()

const props = defineProps({
  currentRow: {
    type: Object as PropType<Nullable<TableData>>,
    default: () => null
  }
})

const { t } = useI18n()

const schema = reactive<FormSchema[]>([
  {
    field: 'msgCategory_dictText',
    label: t('announcement.msgCategory_dictText'),
    component: 'Radio',
    componentProps: {
      options: [
        {
          label: t('announcement.Notice'),
          value: '1'
        },
        {
          label: t('announcement.SystemMessages'),
          value: '2'
        }
      ]
    },
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    }
  },
  {
    field: 'titile',
    label: t('announcement.titile'),
    component: 'Input',
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    }
  },
  {
    field: 'remark',
    label: t('announcement.remark'),
    component: 'Input',
    componentProps: {
      type: 'textarea',
      rows: 1
    },
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    }
  },
  {
    field: 'display_time',
    label: t('exampleDemo.displayTime'),
    component: 'DatePicker',
    componentProps: {
      type: 'datetime',
      valueFormat: 'YYYY-MM-DD HH:mm:ss'
    },
    formItemProps: {
      rules: [required()]
    }
  },
  {
    field: 'msgType',
    label: t('announcement.msgType'),
    // component: 'Radio',
    // componentProps: {
    //   options: [
    //     {
    //       label: t('announcement.specifyUser'),
    //       value: 'USER'
    //     },
    //     {
    //       label: t('announcement.allUser'),
    //       value: 'ALL'
    //     }
    //   ]
    // },
    formItemProps: {
      rules: [required()]
    },
    colProps: {
      span: 24
    }
  },
  {
    field: 'specifyUser',
    label: t('announcement.specifyUser')
  },
  {
    field: 'priority',
    label: t('announcement.msgCategory_dictText'),
    component: 'Radio',
    componentProps: {
      options: [
        {
          label: t('announcement.low'),
          value: 'L'
        },
        {
          label: t('announcement.middle'),
          value: 'M'
        },
        {
          label: t('announcement.high'),
          value: 'H'
        }
      ]
    },
    colProps: {
      span: 24
    }
  }
])

const rules = reactive({
  title: [required()],
  author: [required()],
  importance: [required()],
  pageviews: [required()],
  display_time: [required()],
  content: [required()]
})

const { register, methods, elFormRef } = useForm({
  schema
})
const MsgType = ref('')
// 单选变化
const checkRadio = (a) => {
  console.log(a, 'aa')
  MsgType.value = a
  // if(){
  // setSchema([
  //   {
  //     field: 'content',
  //     path: 'componentProps.defaultHtml',
  //     value: currentRow.content
  //   }
  // ])
  // }
}
watch(
  () => props.currentRow,
  (currentRow) => {
    console.log(currentRow, '-----currentRow')
    if (!currentRow) return
    const { setValues, setSchema } = methods
    setValues(currentRow)
    setSchema([
      {
        field: 'content',
        path: 'componentProps.defaultHtml',
        value: currentRow.content
      }
    ])
  },
  {
    deep: true,
    immediate: true
  }
)

const formRef = ref(elFormRef)
watch(
  async () => await formRef.value,
  (currentRow) => {
    console.log(currentRow, 'formRef')
    // if (!currentRow) return
    // const { setValues, setSchema } = methods
    // setValues(currentRow)
    // setSchema([
    //   {
    //     field: 'content',
    //     path: 'componentProps.defaultHtml',
    //     value: currentRow.content
    //   }
    // ])
  },
  {
    deep: true
    // immediate: true
  }
)
watchEffect(() => {
  // console.log(register(formRef), 'register')
})
defineExpose({
  elFormRef,
  getFormData: methods.getFormData
})
</script>

<template>
  <Form :rules="rules" @register="register">
    <template #msgType="form">
      <div class="flex w-[100%]">
        <ElRadioGroup v-model="form.msgType" @change="checkRadio">
          <ElRadio label="USER">{{ t('announcement.specifyUser') }}</ElRadio>
          <ElRadio label="ALL">{{ t('announcement.allUser') }}</ElRadio>
        </ElRadioGroup>
      </div>
    </template>
    <template v-if="MsgType === 'USER'" #captcha="form">
      <el-select
        v-model="form[specifyUser]"
        filterable
        remote
        multiple
        placeholder="Select"
        style="width: 400px"
      />
      <el-button type="primary" @click="() => dialogRef?.acceptParams(true)" :icon="Search"
        >Search</el-button
      >
    </template>
  </Form>
  <Dialog ref="dialogRef" v-model:users="ruleForm.specifyUser" />
</template>
